
import tpl from './index.html'

export default {
    template: tpl,
    propTypes: {
        // 1、常用
        // 组件唯一默认对外双向绑定的数据
        value: {
            type: 'string',
            value: ''
        },
        // 组件包裹层自定义行内样式
        style: {
            type: 'string',
            value: ''
        },
        // 2、更多
        type: {
            type: 'string',
            value: 'text'
        },
        iconCode: {
            type: function (value, props){
                return true
            },
            value: false
        },
        placeholder: {
            type: 'string',
            value: ''
        },
        autoComplete: {
            type: function (value, props){
                return true;
            },
            value: false
        }
    },
    data: function(){
        return {
            name: "组件名称",
            // 状态
            states: {
                quickPanel: false
            },
            opts: {
                lineHeight: 30
            },
            autoCompleteData: [],
            autoCompleteResult: [],
            vehicleKeys: [
                [
                    {key: "北京市", val: "京"},
                    {key: "天津市", val: "津"},
                    {key: "河北省", val: "冀"}
                ],
                [
                    {key: "总", val: "Z"},
                    {key: "空军", val: "K"},
                    {key: "海军", val: "H"}
                ],
                [
                    {key: "警用", val: "警"},
                    {key: "学", val: "学"},
                    {key: "挂", val: "挂"},
                    {key: "使", val: "使"},
                    {key: "领", val: "领"}
                ]
            ],
            vehicleVal: [
                '', '', ''
            ]
        }
    },
    methods: {
        placeholderClick: function(){
            $(this.$el).find('.input').focus()
        },
        onKeyup: function(event){
            var self = this;
            var keyCode = event.originalEvent.keyCode;
            // 上下箭头
            if(keyCode == 38 || keyCode == 40){
                var max = self.get('autoCompleteResult').length - 1;
                var act = self.get('autoCompleteAct');
                var newIndex = '';
                if(keyCode == 38){
                    // layer.msg('向上');
                    if(act > 0){
                        newIndex = act-1;
                    }else {
                        newIndex = max;
                    }
                }
                if(keyCode == 40){
                    // layer.msg('向下');
                    if(act < max){
                        newIndex = act+1;
                    }else{
                        newIndex = 0;
                    }
                }
                self.set('autoCompleteAct', newIndex);
                self.set('value', self.get('autoCompleteResult.' + newIndex));
            }
            // 回车
            else if(keyCode == 13){
                self.set('autoCompleteResult', [])
            }
            // 正常
            else {
                var value = self.get('value');
                if(value.length <= 0){
                    self.set('autoCompleteResult', [])
                    return false;
                };
                // 根据传入autocomplete来识别类型
                var type = Object.prototype.toString.call(self.get('autoComplete')).slice(8, -1).toLowerCase();
                // 如果传入的数组，则直接使用
                if(type == 'array'){
                    var data = self.get('autoCompleteData');
                    var result = [];
                    for(var i=0; i<data.length; i++){
                        if(data[i].indexOf(value) >= 0){
                            result.push(data[i])
                        }
                    }
                    self.set('autoCompleteResult', result)
                    console.log(value, data, result)
                }
                // 如果传入了string，则视为data url
                if(type == 'string'){
                    $.ajax({
                        type: 'get',
                        url: self.get('autoComplete'),
                        data: {
                            kw: value
                        },
                        success:function(res){
                            if(res.success || !res.code){
                                self.set('autoCompleteResult',res.data.rows)
                            }
                        }
                    })
                }
                
            }
            
        },
        autoCompleteChoose: function(value){
            this.set('value', value);
            this.set('autoCompleteResult', [])
        },
        onBlur: function(){
            var self = this;
            self.set('isFocus', false);
            var delay = setTimeout(function() {
                self.set('autoCompleteResult', [])
            }, 100);
        },
        hidePanel: function(){
            var self = this;
            self.set('states.quickPanel', false);
            self.set('autoCompleteResult', [])
        }
    },
    filters: {
        showPlaceholder: function(){
            var self = this;
            if(self.get('value').length <= 0 && self.get('placeholder')){
                return true;
            }else {
                return false;
            }
        }
    },
    // 数据监听
    watchers: {
        "autoComplete": {
            watcher: function(newValue){
                var self = this;
                if(!newValue)return false;
                // 
                var type = Object.prototype.toString.call(newValue).slice(8, -1).toLowerCase();

                var autoCompleteData = [];
                // 如果传入的数组，则直接使用
                if(type == 'array'){
                    self.set('autoCompleteData',newValue);
                }
                // 如果传入了string，则视为data url
                if(type == 'string'){
                    // 
                }
            },
            sync: true
        },
        "type": {
            watcher: function(newValue){
                var self = this;
                // 如果号牌输入类型，强制改写图标样式
                if(newValue == 'vehicle'){
                    self.set('iconCode', '&#xE531;')    
                }
            },
            sync: true
        },
        "vehicleVal.*": {
            watcher: function(newValue, oldValue, keypath){
                var self = this;
                var vehicleVal = self.get('vehicleVal');
                // 如果不是号牌模式，直接跳出
                if(self.get('type') != 'vehicle') return false;
                // 
                var val = vehicleVal[0] + vehicleVal[1] + vehicleVal[2];
                self.set('value', val);
            },
            sync: true
        }
    },
    afterMount: function(){
        var self = this;
        
    }
};